<template>
  <div class="HeaderStatusCode" style="outline: none">
    <!--{{select}}-->
    <div class="customHeaderLabel"> {{params.displayName}}</div>
    <select name="" id="" style="margin-left: 5px; width: 20px; border: 0px; background: #f5f5f7" v-model="select" @change="change">
      <option value=" ">&nbsp;&nbsp;&nbsp;&nbsp;</option>
      <option value="TM">TM</option>
      <option value="TP">TP</option>
      <option value="SM">SM</option>
      <option value="DC">DC</option>
      <option value="UK">UK</option>
    </select>
  </div>
</template>

<script>
  import Vue from "vue";

  export default Vue.extend({
    data() {
      return {
        select: '',
        expanded: null
      }
    },
    computed: {},
    methods: {
      change() {
        this.params.context.componentParent.methodFromParent(this.select)
        this.select = ''
      },
      expandOrCollapse() {
        this.params.setExpanded(!this.expanded);
      },

      onExpandChanged() {
        this.expanded = this.params.columnGroup.getOriginalColumnGroup().isExpanded()
      }
    },
    mounted() {
      
    }
  })

</script>

<style scoped>
  .customHeaderLabel {
    line-height: 32px;
    float: left;
  }

  .customExpandButton {
    float: right;
    margin-top: 5px;
    margin-left: 3px;
  }

  .expanded {
    animation-name: toExpanded;
    animation-duration: 1s;
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
  }

  .collapsed {
    color: cornflowerblue;
    animation-name: toCollapsed;
    animation-duration: 1s;
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
  }

  @keyframes toExpanded {
    from {
      color: cornflowerblue;
      -ms-transform: rotate(0deg); /* IE 9 */
      -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
      transform: rotate(0deg);
    }
    to {
      color: black;
      -ms-transform: rotate(180deg); /* IE 9 */
      -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
      transform: rotate(180deg);
    }
  }

  @keyframes toCollapsed {
    from {
      color: black;
      -ms-transform: rotate(180deg); /* IE 9 */
      -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
      transform: rotate(180deg);
    }
    to {
      color: cornflowerblue;
      -ms-transform: rotate(0deg); /* IE 9 */
      -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
      transform: rotate(0deg);
    }
  }
</style>
